'use client';

import { Button, Form, Input, Typography, ConfigProvider } from 'antd';
import Image from 'next/image';
import Link from 'next/link';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';

export default function SignUpPage() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#4C6FFF',
          borderRadius: 12,
          controlHeight: 48,
          fontSize: 14,
        },
      }}
    >
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '20px',
        background: 'linear-gradient(135deg, #F5F7FF 0%, #FFFFFF 100%)'
      }}>
        <div style={{
          width: '400px',
          background: '#FFFFFF',
          borderRadius: '24px',
          boxShadow: '0 4px 24px rgba(76, 111, 255, 0.08)',
          padding: '48px 40px',
        }}>
          {/* Logo */}
          <div style={{ textAlign: 'center', marginBottom: '40px' }}>
            <Image
              src="/cat-logo.png"
              alt="Logo"
              width={80}
              height={80}
              style={{ height: 'auto' }}
              priority
            />
          </div>

          {/* Welcome Text */}
          <div style={{ 
            textAlign: 'center', 
            marginBottom: '32px'
          }}>
            <h1 style={{ 
              fontSize: '24px', 
              fontWeight: 600, 
              color: '#1A1A1A',
              marginBottom: '8px'
            }}>
              创建账号
            </h1>
            <p style={{ 
              fontSize: '14px', 
              color: 'rgba(0, 0, 0, 0.45)',
              margin: 0
            }}>
              填写以下信息以创建您的账号
            </p>
          </div>

          {/* Registration Form */}
          <Form
            form={form}
            name="register"
            onFinish={onFinish}
            size="large"
          >
            <Form.Item
              name="email"
              rules={[
                { required: true, message: '请输入邮箱地址' },
                { type: 'email', message: '请输入有效的邮箱地址' }
              ]}
            >
              <Input
                placeholder="邮箱地址"
                style={{ 
                  backgroundColor: '#F8F9FC',
                  border: '1px solid #F0F2F7',
                }}
              />
            </Form.Item>

            <Form.Item
              name="phone"
              rules={[
                { required: true, message: '请输入手机号' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
              ]}
            >
              <Input
                placeholder="手机号"
                style={{ 
                  backgroundColor: '#F8F9FC',
                  border: '1px solid #F0F2F7',
                }}
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码' },
                { min: 8, message: '密码长度至少为8位' }
              ]}
            >
              <Input.Password
                placeholder="设置密码"
                iconRender={(visible) => (
                  visible ? 
                    <EyeTwoTone style={{ fontSize: '16px' }} /> : 
                    <EyeInvisibleOutlined style={{ fontSize: '16px' }} />
                )}
                style={{ 
                  backgroundColor: '#F8F9FC',
                  border: '1px solid #F0F2F7',
                }}
              />
            </Form.Item>

            <Form.Item
              name="confirmPassword"
              dependencies={['password']}
              rules={[
                { required: true, message: '请确认密码' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致'));
                  },
                }),
              ]}
            >
              <Input.Password
                placeholder="确认密码"
                iconRender={(visible) => (
                  visible ? 
                    <EyeTwoTone style={{ fontSize: '16px' }} /> : 
                    <EyeInvisibleOutlined style={{ fontSize: '16px' }} />
                )}
                style={{ 
                  backgroundColor: '#F8F9FC',
                  border: '1px solid #F0F2F7',
                }}
              />
            </Form.Item>

            <div style={{ 
              display: 'flex', 
              alignItems: 'center',
              marginBottom: '24px'
            }}>
              <label style={{ 
                display: 'flex', 
                alignItems: 'center',
                cursor: 'pointer',
                userSelect: 'none'
              }}>
                <input 
                  type="checkbox" 
                  style={{ 
                    width: '16px',
                    height: '16px',
                    marginRight: '8px',
                    borderRadius: '4px',
                    accentColor: '#4C6FFF'
                  }} 
                />
                <span style={{ color: 'rgba(0, 0, 0, 0.65)', fontSize: '14px' }}>
                  我已阅读并同意
                  <Link 
                    href="#" 
                    style={{ 
                      color: '#4C6FFF',
                      marginLeft: '4px'
                    }}
                  >
                    服务条款
                  </Link>
                  <span style={{ margin: '0 4px' }}>和</span>
                  <Link 
                    href="#" 
                    style={{ 
                      color: '#4C6FFF'
                    }}
                  >
                    隐私政策
                  </Link>
                </span>
              </label>
            </div>

            <Button
              type="primary"
              htmlType="submit"
              block
              style={{
                fontSize: '16px',
                fontWeight: 500,
                marginBottom: '24px'
              }}
            >
              注册
            </Button>

            <div style={{ 
              textAlign: 'center',
              fontSize: '14px',
              color: 'rgba(0, 0, 0, 0.45)'
            }}>
              已有账号？
              <Link 
                href="/sign_in" 
                style={{ 
                  color: '#4C6FFF',
                  marginLeft: '4px',
                  fontWeight: 500
                }}
              >
                立即登录
              </Link>
            </div>
          </Form>
        </div>

        {/* Footer */}
        <div style={{ 
          marginTop: '24px',
          color: 'rgba(0, 0, 0, 0.45)',
          fontSize: '12px'
        }}>
          © 2024 NeuroForge · 浙ICP备202302584号
        </div>
      </div>
    </ConfigProvider>
  );
} 